<template>
  <!-- 空调设备统计 -->
  <div class="chart-box2">
    <div class="chart-title">空调设备统计</div>
    <div class="chart-content">
      <div class="top">
        <div class="breathe breathe-green">
          <count-to
            class="number"
            :start-val="data.total_num.oldVal"
            :end-val="data.total_num.newVal"
            :duration="3000"
          />
        </div>
      </div>
      <div class="bottom flex-center">
        <a-row :gutter="[16, 16]">
          <a-col :span="12">
            <div class="text-number-2">
              <div class="icon">
                <cu-icon
                  type="org-zhengchang"
                  :style="{ color: primaryGreen }"
                />
              </div>
              <div class="text">
                <div class="number">
                  <count-to
                    :start-val="data.normal_num.oldVal"
                    :end-val="data.normal_num.newVal"
                    :duration="3000"
                  />
                </div>
                <div class="tip" :style="{ color: lightGreen }">正常</div>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="text-number-2">
              <div class="icon">
                <cu-icon type="org-shinei" :style="{ color: primaryGreen }" />
              </div>
              <div class="text">
                <div class="number">
                  <count-to
                    :start-val="data.indoor_num.oldVal"
                    :end-val="data.indoor_num.newVal"
                    :duration="3000"
                  />
                </div>
                <div class="tip">室内</div>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="text-number-2">
              <div class="icon">
                <cu-icon type="org-guzhang" :style="{ color: primaryGreen }" />
              </div>
              <div class="text">
                <div class="number">
                  <count-to
                    :start-val="data.fault_num.oldVal"
                    :end-val="data.fault_num.newVal"
                    :duration="3000"
                  />
                </div>
                <div class="tip" :style="{ color: primaryRed }">故障</div>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="text-number-2">
              <div class="icon">
                <cu-icon type="org-shiwai" :style="{ color: primaryGreen }" />
              </div>
              <div class="text">
                <div class="number">
                  <count-to
                    :start-val="data.outdoor_num.oldVal"
                    :end-val="data.outdoor_num.newVal"
                    :duration="3000"
                  />
                </div>
                <div class="tip">室外</div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import CountTo from "../countTo/index.vue";
import common from "../../utils/common";
import store from "../../../../store";

export default defineComponent({
  name: "DeviceAirconditionTotal",
  components: { CountTo },
  setup() {
    const state = reactive({
      ...common.theme,
      data: {
        total_num: { ...common.countToInit },
        normal_num: { ...common.countToInit },
        indoor_num: { ...common.countToInit },
        outdoor_num: { ...common.countToInit },
        fault_num: { ...common.countToInit },
      },
    });
    watch(
      () => store.getters.centerControl.Device_airConditionerStatistic,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { Device_airConditionerStatistic } = store.getters.centerControl;
      if (Device_airConditionerStatistic) {
        for (let key in Device_airConditionerStatistic) {
          state.data[key] = {
            oldVal: state.data[key].newVal,
            newVal: Device_airConditionerStatistic[key],
          };
        }
      }
    };
    const init = () => {
      getData();
    };

    init();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
@chartHeight: 10rem;
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chart-content {
  display: flex;
  flex-direction: column;
  .top {
    width: 100%;
    height: @chartHeight;
    &:extend(.flex-center);
    .breathe {
      &:extend(.flex-center);
      width: @chartHeight;
      height: @chartHeight;
      .number {
        color: @primaryGreen;
        font-size: 3.8rem;
        text-shadow: 2px 2px rgba(22, 153, 183, 0.6);
        letter-spacing: 2px;
      }
    }
  }
  .bottom {
    flex: 1;
  }
}
</style>
